body {
  margin: 0;
  background-color: #5473d8;
  min-height: 100vh;

  /* Cambiamos la dirección del flex a columna */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente todo */
}

.contenedor {
  font-family: sans-serif;
  background-color: #5473d8;
  width: 100%;
  max-width: 565px;
  flex: 1; /* Ocupa todo el espacio vertical restante */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50px;
  position: sticky; /* o fixed si quieres que quede fijo */
  top: 0;
  background-color: #5473d8; /* mismo color que el fondo */
}

.resaltado {
  color: rgb(255, 168, 5);
}

h2 {
  color: rgb(255, 255, 255);
  font-size: 2rem;
}

.header-content {
  text-align: center;
}


 
    .manu-icon{
        cursor: pointer;
     width: 100px;
        height: 100px;
    }
    .seleccion{
        border-radius: 5px;
        width: 830px;
        margin-left: 40px;
        height: 100px;
    }
    .menu-seleccion{
        display: flex;
        justify-content: right;
        align-items: center;   
    }
    .form-row button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        font-size: 1.2em;
    }
    
    #total {
        text-align: right;
        margin-top: 10px;
        font-weight: bold;
    }
    
    .keyboard {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Añadida una cuarta columna */
        gap: 10px;
        top: 1055px;
        width: 90%;
        height:36%;

       
         
            grid-template-rows: repeat(4,160px); /* cada fila de 60px */
         
            width: max-content;
    }
    
    .keyboard button {
        padding: 15px;
       
        border: 2px solid #5a5a5a;
        border-radius: 20px;
        background-color: #ffffff;
        cursor: pointer;
       
            font-size: 4em; /* Aumenta el tamaño del número */
            text-align: center;

               
                
                
               
        }
    
    
    .keyboard button:active {
        background-color: #ffffff;
    }
    
    .keyboard button.wide {
        grid-column: span 2;
    }
    
    .keyboard button.tall {
        grid-row: span 2;
    }
    
    .keyboard button.clear {
        background-color: #d85454; /* Rojo claro para limpiar */
    }
    
    .keyboard button.enter {
        background-color: #5473d8;
       
            grid-row: span 2;
            align-self: stretch;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #5473d8;
            color: white;
            font-size: 90px;
          
          } /* Verde claro para enter */
    
    
    .keyboard button.printer {
        font-size: 8em; /* Ajustar el tamaño del icono */
        border: none;
    }

   .loteria1{
    width: 80px;
    height:80px ;
   }


    
    .monto {
        font-size: 55px; /* Tamaño grande */
        color: #333; /* Gris oscuro */
        text-align: left;
        padding-left: 30px; /* Espacio para el símbolo $ */
        background-color: #f5f5f5; /* Fondo claro */
        width: 120px;
        height: 50px;
        margin:10px;
    }


    .form-row label {
       width: 20px;
     

    }
    .form-row input[type="text"] {
        flex-grow: 1;
        padding: 8px;
        border: 1px solid #ffffff;
    }
    
    /* Estilo para hacer los campos de entrada de números redondos */
    .form-row input[id^="numero"] {
        border-radius: 50%; /* Ajusta este valor para más o menos redondeo */
        text-align: center; /* Centrar el texto dentro del círculo */
        width: 15px; /* Ajusta el ancho para que parezca un círculo */
        height: 90px; 
        background: #5473d8;
    border: none;
    margin-left: 45px;
    
    
}
    
    
   
    .form-row button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        font-size: 1.2rem;}

        
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.recycle img{
    size: 10px;
    width: 80px;
   
    
}

.form-row .lotery{
   margin-left: 70px;
}


/* Estilo para los números en los campos de número */
.numero {
    font-size: 70px; /* Tamaño grande */
    color: white; /* Color blanco */
    text-align: center;
    border: 2px solid white;
    width: 20px; /* Ancho adecuado */
    height: 50px; /* Alto adecuado */
    margin: 3px;
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo para el campo de monto */
.monto-container {
    position: relative;
    display: inline-block;
}



/* Estilo para el símbolo $ fijo */


.active-input {
    border: 2px solid #007bff;
    outline: none;
}
.active-input {
    border: 2px solid #007bff;
    outline: none;
}